<template>
    <div>
        <!-- 1.0 面包屑导航 -->
        <div class="section">
            <div class="location">
                <span>当前位置：</span>
                <router-link to="/">首页</router-link> &gt;
                <router-link to="/site/goodslist">购物商城</router-link>
            </div>
        </div>

        <!-- 2.0 顶部分类、轮播图、推荐商品部分 -->
        <div class="section">
            <div class="wrapper">
                <div class="wrap-box">
                    <!--类别菜单-->
                    <div class="left-220" style="margin:0;">
                        <div class="banner-nav">
                            <ul>
                                <!--此处声明下面可重复循环-->

                                <li v-for="item in topData.catelist" :key="item.id">
                                    <h3>
                                        <i class="iconfont icon-arrow-right"></i>
                                        <span>{{item.title}}</span>
                                        <p>
                                            <span v-for="subitem in item.subcates" :key="subitem.id">
                                                {{subitem.title}}&nbsp;
                                            </span>
                                        </p>
                                    </h3>
                                    <div class="item-box">
                                        <!--如有三级分类，此处可循环-->
                                        <dl>
                                            <dt>
                                                <a href="/goods/40.html">{{item.title}}</a>
                                            </dt>
                                            <dd>
                                                <a v-for="subitem in item.subcates" :key="subitem.id" href="/goods/43.html">{{subitem.title}}</a>
                                            </dd>
                                        </dl>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <!--/类别菜单-->

                    <!--幻灯片-->
                    <div class="left-705">
                        <div class="banner-img">
                            <el-carousel :interval="3000" arrow="always">
                                <el-carousel-item v-for="item in topData.sliderlist" :key="item.id">
                                    <img :src="item.img_url" alt="">
                                    <h3>{{ item.title }}</h3>
                                </el-carousel-item>
                            </el-carousel>

                        </div>
                    </div>
                    <!--/幻灯片-->

                    <!--推荐商品-->
                    <div class="left-220">
                        <ul class="side-img-list">

                            <li v-for="(item,index) in topData.toplist" :key="index">
                                <div class="img-box">
                                    <label>{{index+1}}</label>
                                    <img :src="item.img_url">
                                </div>
                                <div class="txt-box">
                                    <a href="/goods/show-98.html">{{item.title}}</a>
                                    <span>{{item.add_time | fmtDate("YYYY-MM-DD")}}</span>
                                </div>
                            </li>

                        </ul>
                    </div>
                    <!--/推荐商品-->
                </div>
            </div>
        </div>

        <!-- 3.0 商品列表部分 -->
        <div class="section goodsListStyle" v-for="item in goodsList" :key="item.level1cateid">

            <!--子类-->
            <div class="main-tit">
                <h2>{{item.catetitle}}</h2>
                <p>

                    <a v-for="subitem in item.level2catelist" :key="subitem.subcateid" href="/goods/43.html">{{subitem.subcatetitle}}</a>

                    <a href="/goods/40.html">更多
                        <i>+</i>
                    </a>
                </p>
            </div>
            <!--/子类-->
            <div class="wrapper clearfix">
                <div class="wrap-box">
                    <ul class="img-list">
                        <li v-for="subitem in item.datas">
                            <router-link :to="{path:'/site/goodsinfo/'+subitem.artID}">
                                <div class="img-box">
                                    <img :src="subitem.img_url">
                                </div>
                                <div class="info">
                                    <h3>{{subitem.artTitle}}</h3>
                                    <p class="price">
                                        <b>{{subitem.sell_price}}</b>元</p>
                                    <p>
                                        <strong>库存 {{subitem.stock_quantity}}</strong>
                                        <span>市场价：
                                            <s>{{subitem.market_price}}</s>
                                        </span>
                                    </p>
                                </div>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</template>

<style>
    .el-carousel {
        height: 100%;
    }

    .el-carousel__container {
        height: 100%;
    }

    /* .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 30px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  } */
</style>

<script>
    export default {
        data() {
            return {
                topData: {}, //头部数据，包括顶部分类、轮播图、推荐商品部分的数据
                goodsList:[] //商品列表数据
            }
        },
        created() {
            this.getTopData()
            this.getGoodsListData()
        },
        methods: {
            //获取顶部区域的数据
            getTopData() {
                const url = `site/goods/gettopdata/goods`

                this.$axios.get(url).then(response => {
                    this.topData = response.data.message
                })
            },
            //获取商品列表区域数据
            getGoodsListData(){
                const url = `site/goods/getgoodsgroup`

                this.$axios.get(url).then(response => {
                    this.goodsList = response.data.message
                })
            }
        }
    }
</script>